<!--
 * @Description: 全部商品页面组件(包括全部商品,商品分类,商品搜索)
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-08 12:11:13
 -->
<template>
    <div class="goods" id="goods" name="goods">
        <!-- 分类标签 -->
        <div class="nav">
            <div class="product-nav">
                <div class="title">分类</div>
                <el-tabs v-model="formInline.typeId" type="card" @tab-click="handleClick">
                    <el-tab-pane
                            v-for="item in tabsList"
                            :key="item.id"
                            :label="item.typeName"
                            :name="item.id"
                    />
                </el-tabs>
            </div>
        </div>
        <!-- 分类标签END -->

        <!-- 主要内容区 -->
        <div class="main">
            <div class="list">
                <el-table
                        v-if="infomationList.length>0"
                        :data="infomationList"
                        style="width: 100%"
                        height="500">
                    <el-table-column
                            label="日期"
                            width="300">
                        <template slot-scope="scope">
                            <div>{{scope.row.createTime|timestampToTime}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="新闻标题">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="goToDetail(scope.row.id)" type="text" size="small">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagination v-if="infomationList.length>0" v-bind:child-msg="pageparm"
                            @callFather="callFather"></Pagination>
                <div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
            </div>

        </div>
        <!-- 分页END -->
        <!-- 主要内容区END -->
    </div>
</template>
<script>
    import Pagination from '../components/Pagination'

    export default {
        data() {
            return {
                infomationList: [],
                search: '',
                formInline: {
                    pageIndex: 1,
                    pageSize: 10,
                    typeId: 1,
                    title: ''
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                tabsList: [],
            };
        },
        // 注册组件
        components: {
            Pagination
        },
        created() {
            this.getTabs()
            this.getData(this.formInline)
        },
        activated() {
            // 如果路由传递了search，则为搜索，显示对应的分类商品
            if (this.$route.query.search != undefined) {
                console.log(this.$route.query.search)
                this.formInline.title = this.$route.query.search;
            }
        },
        watch: {
            search: function (val) {
                console.log(val)
                if (val != "") {
                    this.formInline.title = val;
                    this.getData(this.formInline);
                }
            },
            // 监听路由变化，更新路由传递了搜索条件
            $route: function (val) {
                if (val.path == "/goods") {
                    if (val.query.search != undefined) {
                        this.pageparm.currentPage = 1;
                        this.pageparm.total = 0;
                        this.search = val.query.search;
                    }
                }
            }
        },
        methods: {
            getData(prarm) {
                this.$axios.get("/api/information/query", {
                    params: prarm
                })
                    .then(res => {
                        this.infomationList = res.data.data.resultList
                        this.pageparm.total = res.data.data.totalCount
                    }).catch(err => {
                    return Promise.reject(err);
                });
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.pageIndex = parm.currentPage
                this.formInline.pageSize = parm.pageSize
                this.getData(this.formInline)
            },
            handleClick(tab, event) {
                this.formInline.typeId = tab.name
                this.formInline.pageIndex = 1
                this.formInline.pageSize = 10
                this.pageparm.currentPage = 1
                this.pageparm.pageSize = 10
                this.pageparm.total = 0
                this.getData(this.formInline)
            },
            getTabs() {
                this.$axios.get("/api/type/getAll", {})
                    .then(res => {
                        this.tabsList = res.data.data
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
            },
            goToDetail(id) {
                this.$router.push(
                    {
                        path: '/info/details',
                        query: {
                            id: id
                        }
                    })
            },
            // 返回顶部
            backtop() {
                const timer = setInterval(function () {
                    const top = document.documentElement.scrollTop || document.body.scrollTop;
                    const speed = Math.floor(-top / 5);
                    document.documentElement.scrollTop = document.body.scrollTop =
                        top + speed;

                    if (top === 0) {
                        clearInterval(timer);
                    }
                }, 20);
            },
        }
    };
</script>

<style scoped>
    .goods {
        background-color: #ffffff;
    }

    /* 面包屑CSS */
    .el-tabs--card .el-tabs__header {
        border-bottom: none;
    }

    .goods .breadcrumb {
        height: 50px;
        background-color: white;
    }

    .goods .breadcrumb .el-breadcrumb {
        width: 1225px;
        line-height: 30px;
        font-size: 16px;
        margin: 0 auto;
    }

    /* 面包屑CSS END */

    /* 分类标签CSS */
    .goods .nav {
        background-color: white;
    }

    .goods .nav .product-nav {
        width: 1225px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
    }

    .nav .product-nav .title {
        width: 50px;
        font-size: 16px;
        font-weight: 700;
        float: left;
    }

    /* 分类标签CSS END */

    /* 主要内容区CSS */
    .goods .main {
        margin: 0 auto;
        max-width: 1225px;
    }

    .goods .main .list {
        min-height: 650px;
        padding-top: 14.5px;
        margin-left: -13.7px;
        overflow: auto;
    }

    .goods .main .pagination {
        height: 50px;
        text-align: center;
    }

    .goods .main .none-product {
        color: #333;
        margin-left: 13.7px;
    }

    /* 主要内容区CSS END */
</style>
